<template>
    <div v-if="detailStatus" class="m-detail-modal">
        <div class="header">
            车商详情
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="content">
            <div class="list-header">车商基本信息:</div>
            <Row class-name="list-row">
                <Col span="12">
                车商分类：<span>{{detailData.dealer_type == 0 ?'二手车':detailData.dealer_type == 1 ?'4S店车商':'平行进口车商'}}</span>
                </Col>
                <Col span="12">
                车行名称：<span>{{detailData.dealer_title=='' ? '未知':detailData.dealer_title}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                车商名称：<span>{{detailData.dealer_name == '' ? '匿名':detailData.dealer_name}}</span>
                </Col>
                <Col span="12">
                登录账号：<span>{{detailData.member_username}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                所属市场：<span>{{detailData.bazzar_title || '未分配'}}</span>
                </Col>
                <Col span="12">
                联系电话：<span>{{detailData.dealer_tel || '未分配'}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                联系人：<span>{{detailData.dealer_contacts || '未分配'}}</span>
                </Col>
                <Col span="12">
                门市地址：<span>{{detailData.dealer_address || '未分配'}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                车商等级：<span>{{dealerLevel}}</span>
                </Col>
            </Row>
            <div class="list-header" style="padding-left: 25px">营业执照:</div>
            <div class="list-row">
                <img :src="detailData.dealer_logo" alt="">
            </div>
            <div class="list-header" style="padding-left: 25px">详细介绍:</div>
            <div class="list-row">
                {{detailData.dealer_remark}}
            </div>
            <div class="list-header" style="padding-left: 25px">收费配置:</div>
            <div class="list-row">
                <div class="car-header">储蓄卡</div>
                <Table border :columns="columns4" :data="cartData"></Table>
            </div>
            <div class="list-row" style="margin-top: 20px;">
                <div class="car-header">信用卡</div>
                <Table border :columns="columns4" :data="cartData1"></Table>
            </div>
            <div class="list-row" style="margin-top: 20px;">
                <div class="car-header">微信</div>
                <Table border :columns="columns4" :data="cartData2"></Table>
            </div>
            <div class="list-row" style="margin-top: 20px;">
                <div class="car-header">支付宝</div>
                <Table border :columns="columns4" :data="cartData3"></Table>
            </div>
        </div>
        <Table border showStripe :columns="columns3" :data="gradeData" ></Table>

        <div style="position: relative">
            <Page style="text-align: right;padding-top: 10px;"
                  :page-size="searchData3.pageSize"
                  @on-page-size-change="pageSizeFn3"
                  @on-change="pageFn3"
                  :total="total3" show-sizer show-total></Page>
        </div>





        <Card>
            <div class="list-header"> 跟进记录:</div>
            <Table border showStripe :columns="columns" :data="recordData" ></Table>
            <div style="position: relative">
                <Page style="text-align: right;padding-top: 10px;"
                      :page-size="searchData.pagesize"
                      @on-page-size-change="pageSizeFn"
                      @on-change="pageFn"
                      :total="total" show-sizer show-total></Page>
            </div>
        </Card>


        <Card>
            <div class="list-header"> 金融意向记录:</div>
            <Table border showStripe :columns="columns1" :data="inDataPrice" ></Table>
            <div style="position: relative">
                <Page style="text-align: right;padding-top: 10px;"
                      :page-size="searchData2.pagesize"
                      @on-page-size-change="pageSizeFn2"
                      @on-change="pageFn2"
                      :total="total2" show-sizer show-total></Page>
            </div>
        </Card>



    </div>
</template>

<script>
    import qs from 'qs'
    export default {
        props: ['detailStatus', 'detailData', "test"],
        watch: {
            test(val) {
                this.gradeDatas(this.detailData.dealer_id);
                this.getRecordData(this.detailData.dealer_id);
                this.getInData(this.detailData.dealer_id)
            }
        },
        data() {
            return {
                searchData:{
                    pagesize: 1,
                    pagenum: 10,
                    type:'2'
                },
                searchData2:{
                    pagesize: 1,
                    pagenum: 10,
                    type:'2'
                },
                total:0,
                total2:0,
                searchData3:{
                    pageSize: 10,
                    pageNum: 1,
                },
                total3:0,
                gradeData:[],
                recordData:[],
                inDataPrice:[],
                columns3:[{
                    title: '等级ID',
                    key: 'dealer_grade_id',
                    width:220
                },
                    {
                        title: '等级名称',
                        key: 'grade_name',
                        width:220
                    },
                    {
                        title: '起始时间',
                        key: 'add_time',
                        width:220
                    },
                    {
                        title: '截止时间',
                        key: 'update_time',
                        width:220
                    },
                    {
                        title: '过期状态',
                        key: 'update_time',
                        width:220,
                        render: (h, params) => {
                            const row = params.row;
                            let text = '';
                            if('1'==row.gone_status){
                                text='有效';
                            }else{
                                text='过期';
                            }
                            return text;
                        }
                    },
                    {
                        title: '评分分数',
                        key: 'dealer_score',
                        width:220
                    }
                ],
                columns4: [
                    {
                        title: '配置时间段',
                        key: 'config_item',
                        render: (h, params) => {
                            const row = params.row;
                            let text = '';
                            switch (row.config_item) {
                                case 'default':
                                    text = '常规时间';
                                    break;
                                case 'time_range':
                                    text = '从' + row.start_time + '到' + row.end_time;
                            }
                            return h('span', text);
                        }
                    },
                    {
                        title: '结算时间',
                        key: 'close_way'
                    },
                    {
                        title: '结算费率',
                        key: 'close_rate'
                    }
                ],
                columns:[{
                    title: '跟进时间',
                    key: 'visitTime',
                    width:320
                },
                    {
                        title: '业务员名',
                        key: 'staffName',
                        width:320
                    },
                    {
                        title: '跟进记录',
                        key: 'remark',
                        width:800
                    }
                ],
                columns1: [
                    {
                        title: '跟进时间',
                        key: 'createTime',
                        width:220
                    },
                    {
                        title: '金融产品',
                        key: 'financial',
                        width:220
                    },
                    {
                        title: '业务员名',
                        key: 'staffName',
                        width:220
                    },
                    {
                        title: '跟进记录',
                        key: 'remark',
                        width:800
                    }
                ]
            }
        },
        methods: {
            close() {
                this.$emit('closeModal')
            },
            pageSizeFn3(size) {
                this.searchData3.pageSize = size;
                this.gradeDatas(this.detailData.dealer_id);
            },
            pageFn3(pageNum) {
                this.searchData3.pageNum = pageNum;
                this.gradeDatas(this.detailData.dealer_id);
            },
            gradeDatas(dealer_id){
                let  params = qs.stringify( this.searchData3);
                this.axios.get( process.env.API_CAR+"/dealer_grade_relation/queryAll?dealer_id="+dealer_id+"&"+ params).then(response=>{
                    if (response.data.code === '1') {
                        let res = response.data.data;
                        this.total=response.data.data.total;
                        this.gradeData=res.list;

                    } else {
                        this.$Message.error(response.data.info);
                    }
                }, error=>{

                });
            },
            pageSizeFn(size) {
                this.searchData.pagesize = size;
                this.getRecordData();
            },
            pageFn(pageNum) {
                this.searchData.pagenum = pageNum;
                this.getRecordData();
            },
            pageSizeFn2(size) {
                this.searchData2.pagesize = size;
                this.getInData();
            },
            pageFn2(pageNum) {
                this.searchData2.pagenum = pageNum;
                this.getInData();
            },
            getRecordData(indId){
                let  params = qs.stringify( this.searchData);
                this.axios.get( process.env.API_ZSCAR+"/indeal/visitList?indId="+indId+"&"+ params).then(response=>{
                    if (response.data.code === 1) {
                        let res = response.data.data;
                        this.total=response.data.data.total;
                        this.recordData=res.list;

                    } else {
                        this.$Message.error(response.data.msg);
                    }
                },error=>{
                });
            },
            getInData(indId){
                let  params = qs.stringify( this.searchData2);
                this.axios.get( process.env.API_ZSCAR+"/indeal/financialList?dealerId="+indId+"&"+ params).then(response=>{
                    if (response.data.code === 1) {
                        let res = response.data.data;
                        this.total2=response.data.data.total;
                        this.inDataPrice=res.list;

                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, error=>{
                    this.$Message.error(response.data.msg);
                });
            }
        },
        computed: {
            dealerLevel() {
                let text = '普通车商';
                switch (this.detailData.dealer_level) {
                    case '1':
                        text = '普通车商';
                        break;
                    case '2':
                        text = '铜牌车商';
                        break;
                    case '3':
                        text = '银牌车商';
                        break;
                    case '4':
                        text = '金牌车商';
                        break;
                }
                return text;
            },
            cartData() {
                let data = [];
                if (this.detailData.rateList) {
                    this.detailData.rateList.map((item) => {
                        if (item.card_class == 1) {
                            data.push(item)
                        }
                    })
                }
                return data;
            },
            cartData1() {
                let data = [];
                if (this.detailData.rateList) {
                    this.detailData.rateList.map((item) => {
                        if (item.card_class == 0) {
                            data.push(item)
                        }
                    })
                }
                return data;
            },
            cartData2() {
                let data = [];
                if (this.detailData.rateList) {
                    this.detailData.rateList.map((item) => {
                        if (item.card_class == 2) {
                            data.push(item)
                        }
                    })
                }
                return data;
            },
            cartData3() {
                let data = [];
                if (this.detailData.rateList) {
                    this.detailData.rateList.map((item) => {
                        if (item.card_class == 3) {
                            data.push(item)
                        }
                    })
                }
                return data;
            },

        }
    }
</script>
<style lang="scss" scoped>
    .m-detail-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

    .header {
        background-color: #f8f8f9;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        padding-left: 25px;
        padding-right: 5px;
        color: #000;
        box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

    span {
        float: right;
        padding: 0 20px;
        cursor: pointer;
    }

    }
    .content {
        font-size: 14px;
        padding: 15px 50px 150px 25px;
        height: 100%;
        overflow-y: auto;
    }

    .list-header {
        height: 45px;
        color: #333;
        line-height: 45px;
    }

    .list-row {
        padding-left: 100px;
        font-size: 14px;
        line-height: 40px;
    }
    .list-row img {
        width: 100px;
        height: auto;
    }
    .car-header {
        background-color: #f7f7f7;
        padding-left: 15px;
        border: 1px solid #e9eaec;
        border-radius: 2px;
    }

    }
</style>
